现在在开发一个应用(Web或者App)的时候,通常需要前后端进行配合。一般情况下,我们使用REST风格的JSON结构进行数据交互。
实际工作中,我们会遇到服务端API的开发速度不能够满足前端开发速度的情况。这个时候,前端可以通过创建一个静态的JSON文件来模拟数据。但是呢,这样的模拟数据仅仅可以显示,如果要做增、删、改操作,必然不是那么方便。
json-server,就是为了给我们解决模拟REST API的一个npm模块。我们不需要自己写任何的代码,只需要将自己需要的模拟数据写入一个JSON文件中,json-server就可以向外提供REST风格的接口,方便我们进行数据模拟。
接下来,让我们看看这个神奇的工具吧!
基本使用
安装
npm install -g json-server
模拟数据
创建一个文件db.json,并填入以下数据
{
"posts": [
{
"id": 1,
"title": "用json-server模拟rest api",
"author": "zxguan"
}
],
"comments": [
{
"id": 1,
"body": "用json-server模拟rest api",
"postId": 1
}
],
"profile": {
"name": "zxguan"
}
}
使用
运行: json-server --watch db.json
在浏览器中输入http://localhost:3000
[{
id: 1,
title: "用json-server模拟rest api",
author: "zxguan"
}]
其他类似的,我们可以通过postman进行POST、PUT和DELETE操作。使用时指定 Content-Type: application/json
。
其他特性
过滤查询
GET /posts?title=test.........&author=zxguan
GET /posts?id=1&id=2
GET /comments?author.name=zxguan
分页
使用 _start
、 _end
和 _limit
进行分页。
GET /posts?_start=0&_end=10
GET /posts/1/comments?_start=10&_end=20
GET /posts/1/comments?_start=20&_limit=10
排序
使用 _sort
和 _order
进行排序
GET /posts?_sort=views&_order=DESC
GET /posts/1/comments?_sort=votes&_order=ASC
运算
- _gte : 大于等于
- _lte : 小于等于
- _ne : 不等于
- _like : like操作
用法为: 字段_gte 、字段_lte 、 字段_ne 、 字段_like
GET /posts?views_gte=10&views_lte=20
GET /posts?id_ne=1
GET /posts?title_like=server
全文检索
参数为q,
GET /posts?q=internet
关联关系
通过_embed获得子资源;通过_expand获得父级资源,通过资源名称获得嵌套资源
如:
GET /posts?_embed=comments
GET /posts/1?_embed=comments
GET /comments?_expand=post
GET /comments/1?_expand=post
GET /posts/1/comments
POST /posts/1/comments
高级特性
使用其他数据源
使用js生成随机数
将以下代码复制进index.js
module.exports = function() {
var data = { users: [] }
// Create 1000 users
for (var i = 0; i < 1000; i++) {
data.users.push({ id: i, name: 'user' + i })
}
return data
}
运行:json-server index.js
使用外部数据链接
json-server http://jsonplaceholder.typicode.com/db
自定义路由
方式一:使用routes.json
{
"/api/": "/",
"/v0.1/:resource/:id/show": "/:resource/:id",
"/v0.1/:category": "/posts/:id?category=:category"
}
运行: json-server db.json --routes routes.json
方式二:使用自定义服务
将以下代码复制如server.js
var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()
server.use(middlewares)
server.get("/echo",function(req,res){
res.jsonp(req.query)
})
server.use(jsonServer.bodyParser)
server.use(function(req,res,next){
if(req.method === 'POST'){
req.body.createAt = Date.now()
}
next()
})
server.use(router)
server.listen(3000, function () {
console.log('JSON Server is running')
})
然后运行 node server.js
当然,这种方式你需要使用到package.json,然后将npm install json-server --save
方式三: 使用rewriter
复制以下代码到server.js
var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(jsonServer.bodyParser)
server.use('/v0.1', router)
server.listen(3000, function () {
console.log('JSON Server is running')
})
或者:
var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(jsonServer.bodyParser)
server.use(jsonServer.rewriter({
'/api/': '/',
'/blog/:resource/:id/show': '/:resource/:id'
}))
server.use(router)
server.listen(3000, function () {
console.log('JSON Server is running')
})
自定义输出
复制以下代码到server.js
var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()
var _ = require('lodash');
server.use(middlewares)
server.use(jsonServer.bodyParser)
router.render = function (req, res) {
var value = res.locals.data
if (_.isArray(value)) {
res.jsonp({
items: value
})
}else{
res.jsonp(value)
}
}
server.use(router)
server.listen(3000, function () {
console.log('JSON Server is running')
})